<template>

  <div>
    <el-button  type="text" v-show="count===0" class="code" @click="sendCode">
      {{span_text}}
      <i :class="icon"/>
    </el-button>
    <transition name="el-zoom-in-center">
    <div v-show="count>0" class="tips">
      <el-button v-show="count>0" disabled type="text" style="margin-left: 10px" > {{count}}s后再发送</el-button>
    </div>
    </transition>
  </div>

</template>

<script>
export default {
  name: "GetCodeButton",
  props:{
    span_text:{
      type:String
    },
    icon:{
      type:String
    },
    counter:{
      type:Number,
      default: 0
    },
    loginCate:{
      type:String,
      default: 'mobile'
    }
  },
  data(){
    return{
      count: 0
    }
  },
  methods:{
    sendCode(){
      this.count = this.counter
      if(this.loginCate === 'mobile'){
        console.log(1)
      }else{
        console.log(2)
      }
      this.timer = setInterval(()=>{
        this.count--
        if (this.count===0){
          clearInterval(this.timer)
        }
      },1000)
    },
  }
}
</script>

<style>


span{
  letter-spacing: 0.1em;
  font-size: 16px;
}

.code span{
  color: #00a4ff;
}
.code span:hover{
  color: #343a40;
}

</style>